<template>
  <div class="home">
    <van-nav-bar title="首页" :fixed="true" placeholder>
      <template #left>
        <div class="logo"></div>
      </template>
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <van-tabs v-model="active">
      <van-icon name="qr" class="wap" />
      <van-tab v-for="(item, index) in list" :key="index" :title="item.name">
        <articleList :channeId="item.id"></articleList>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { userHome } from '../../api/home'
import articleList from './articleList'

export default {
  components: {
    articleList
  },
  name: 'home',
  data () {
    return {
      active: 0,
      list: [1, 2, 3, 4, 5, 6, 7, 8]
    }
  },

  async created () {
    const res = await userHome()
    this.list = res.data.data.channels
  }
}
</script>

<style lang="less">
.home {
  .logo {
    background: url('~@/assets/log.png') no-repeat;
    background-size: cover;
    width: 100px;
    height: 30px;
  }
  .van-tabs__wrap--scrollable {
    position: fixed;
    padding-right: 28px;
    background-color: #fff;
    z-index: 88;
  }
  .van-icon-qr {
    font-size: 24px;
    top: 55px !important;
    position: fixed !important;
    z-index: 888;
  }
  .van-tabs__content {
    padding: 0 0 48px 0;
  }
  // .van-tabs--line {
  //   padding-right: 30px;
  // }
  .van-cell::after {
    border: none !important;
  }
  .wap {
    position: absolute;
    top: 9px;
    right: 5px;
    color: #646566;
  }
  .van-nav-bar__content {
    background-color: #5876b1 !important;
    z-index: 9999;
  }
  .van-tabs__line {
    background-color: #5876b1 !important;
  }
  .van-nav-bar {
    height: 0 !important;
  }
  .van-nav-bar__title {
    font-size: 18px !important;
    color: #fff !important;
  }
  .van-nav-bar__placeholder {
    height: 48px !important;
  }
}
</style>
